<template>
  <div>
    <span class="name">按省份选择：</span>
    <Mselect
      :list="provinceList" 
      title="省份"
      :value="province"
      :showWrapperActive="provinceActive"
      @change_active="changeprovinceActive"
      @change="changeprovince"
    />
    <Mselect
      :list="cityList"
      title="城市"
      :value="city"
      :showWrapperActive="cityActive"
      @change_active="changecityActive"
      @change="changecity"
    />
    <span style="margin-left:50px;padding-right:10px">直接搜索：</span>
    <el-select
      v-model="value"
      filterable
      remote
      reserve-keyword
      placeholder="请输入城市的关键词">
    <el-option
      v-for="item in optionList"
      :key="item"
      :label="item"
      :value="item">
    </el-option>
  </el-select>
  </div>
</template>

<script>
import Mselect from './select.vue'
export default {
    data(){
        return{
            provinceList:['山东','甘肃','江苏','北京','云南','海南','浙江','上海','天津','陕西','新疆','贵州','安徽','澳门','湖南','河北','香港','辽宁','四川','宁夏','吉林','福建','湖北','广东','重庆','山西','江西','黑龙江','青海','河南'],
            province:'省份',
            cityList:['北京','上海','广州','深圳','天津','西安','重庆','杭州','南京','武汉','成都'],
            optionList:['北京','上海','广州','深圳','天津','西安','重庆','杭州','南京','武汉','成都'],
            city:'城市',
            provinceActive:false,
            cityActive:false
        }
    },
    components:{
        Mselect
    },
    methods:{
        changeprovinceActive(flag){
            this.provinceActive = flag;
            if(flag){
                this.cityActive = false
            }
        },
        changecityActive(flag){
            this.cityActive = flag;
            if(flag){
                 this.provinceActive
                  = false
            }
        },
        changeprovince(value){
             this.province = value
        },
        changecity(value){
            this.city = value
        }
    }
}
</script>

<style lang='scss'>
@import "@/assets/css/changecity/select.scss";
</style>